<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 布局</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1><a href="../../index.html">返回</a>，参考文章<a
            href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool">Flex 布局教程：语法篇</a>，<a
            href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">MDN 的CSS 弹性盒子布局
        </a> </h1>
    <div class="fx">
        <h1>
            <p>flex-flow = &lt;'flex-direction'&gt; || &lt;'flex-wrap'&gt;</p>
            <p>flex-direction: row | row-reverse | column | column-reverse;</p>
            <p>flex-wrap: nowrap | wrap | wrap-reverse;</p>
        </h1>
        <div class="flex-flow">
            <div>1</div>
            <div>2</div>
            <div class="basis">3 <br>flex-shrink: 0;
                flex-basis: 300px;</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
        <h1>
            <p>flex-flow = &lt;'flex-direction'&gt; || &lt;'flex-wrap'&gt;</p>
            <p>flex-direction: row | row-reverse | column | column-reverse;</p>
            <p>flex-wrap: nowrap | wrap | wrap-reverse;</p>
        </h1>
        <div class="flex-flow2">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div class="basis">5 <br>flex-shrink: 0;
                flex-basis: 300px;</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
        <h1>
            <p>flex = none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]</p>
            <p>flex-grow: &lt;number&gt;</p>
            <p>flex-shrink: &lt;number&gt;</p>
            <p>flex-shrink: content | &lt;width&gt;</p>
        </h1>
        <div class="flex">
            <div class="basis">1 <br>flex-shrink: 0;
                flex-grow: 0;
                flex-basis: 200px;</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div class="grow">5 <br>flex-grow: 0;</div>
            <div>6</div>
            <div class="shrink">7 <br>flex-shrink: 0;</div>
            <div>8</div>
            <div>9</div>
        </div>
        <h1>
            <p>align-content: flex-start | flex-end | center | space-between | space-around
                | stretch;</p>
        </h1>
        <div class="align-content">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </div>
</body>

</html>